import React from 'react';
//目标是实现一个根据关键字进行搜索的一个功能
import { useState, useEffect, useMemo, memo } from 'react';
import axios from 'axios'

// 使用memo 纯组件可以实现性能优化
// memo为一个高阶组件的强化函数， 该强化函数返回一个组件,该组件为纯组件？
// 什么是纯组件？该组件是否渲染只和当前组件的props 和 state 有关系
// 什么是纯函数？ reducer 就是一个纯函数，函数的返回值只受其参数的影响，这就是纯函数


const Child = (props) => {
    console.log('props', props);
    // 定义关键字
    const [keyword, setkeyword] = useState('');
    // 定义学校数组
    const [collegeArr, setCollegeFn] = useState([]);
    useEffect(() => {
        // 发起数据请求
        axios.get('https://api.i-lynn.cn/college?page=1').then(res => {
            // console.log(res);
            setCollegeFn(res.data.data.list1)
        })
    }, [])

    const newCollegeArr = collegeArr.filter(item => {
        console.log('filter');
        return item.school_name.includes(keyword)
    })


    return (
        <div>
            <p>
                <input type='text' value={keyword} onChange={(e) => {
                    setkeyword(e.target.value)
                }} />
            </p>
            {/* 遍历学校 */}
            <ul>
                {
                    newCollegeArr.map((item) => {
                        return <li key={item.id}>{item.school_name}</li>
                    })
                }
            </ul>


        </div>
    );
}

export default memo(Child);
